<template>
	<view class="">
		<view class="search-box flex align">
			<image src="https://wx.2024csnl.com/static/home/home-search.png" mode="aspectFill" class="home-search" />
			<input type="text" class="home-search-input" placeholder="搜索关键词" placeholder-style="color:#CCCCCC;"
				v-model="keyword">
			<view class="home-search-btn" @click="onRefirsh">搜索</view>
		</view>
		<scroll-view scroll-x="true" class="scroll-box flex align">
			<view v-for="(nav,i) in navList" :key="i" :class="navIndex==nav.id?'nav-act':''" class="nav-item"
				@click="checkNav(nav.id)">{{nav.name}}</view>
		</scroll-view>

		<view class="goods-list between">
			<view class="goods-item column" v-for="(item,index) in list" :key="index"
				@click="onSkip(`/pages/goods/goods-detail?id=${item.id}&pageType=商家列表`)">
				<image :src="item.pic" mode="aspectFill" class="goods-img" />
				<view class="goods-info">
					<view class="">{{item.name}}</view>
					<view class="goods-price">
						<text>￥</text>
						<text class="price">{{item.sell_price}}</text>
					</view>
				</view>
			</view>

		</view>
		<view class="flex-center addressImgBox" v-if="list.length==0">
			<image src="https://wx.2024csnl.com/static/noData.png"></image>
			暂无数据~
		</view>
		<view style="text-align: center;color: #999;" v-if="noMoreData&&list.length!=0">没有更多啦~</view>

		<view class="tab-hig" />
		<tabbar :current="1" :bid="bid"></tabbar>
	</view>
</template>

<script>
	import {
		merchantClassify,
		merchantGoodsList
	} from "@/api/index.js"
	import tabbar from '@/components/tabbar.vue';
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				keyword: '',
				list: [],
				pagenum: 1,
				totalPage: '',
				noMoreData: false,
				bid: '',
				navList: [],
				navIndex: 1,

			}
		},
		mounted(){
			var a = document.getElementsByClassName('uni-page-head-hd')[0]
			a.style.display = 'none';
		},
		onLoad(opt) {
			// app解决获参方法
			if (opt.bid) {
				this.bid = opt.bid
				uni.setStorageSync('bid', opt.bid)
			} else {
				this.bid = uni.getStorageSync('bid')
			}
		},
		onUnload() {
			uni.removeStorageSync('bid');
		},
		onShow() {
			// #ifdef H5
			// hash路由
			const w = location.hash.indexOf('?');
			const paraString = location.hash.substring(w + 1)
			let paras = paraString.split("=");
			this.bid = paras[1]
			// histery路由用这个
			// let paraString = location.search;
			// #endif
			this.getMerchantClassify()
		},
		methods: {
			onRefirsh() {
				this.pagenum = 1
				this.list = []
				this.getMerchantGoodsList()
			},
			// 商品列表
			async getMerchantGoodsList(type) {
				const res = await merchantGoodsList(
					`s=/ApiIndex/bgoodslist&id=${this.bid}&cid=${this.navIndex}&keyword=${this.keyword}`)
				// const res = await merchantGoodsList('s=/ApiIndex/bgoodslist', {
				// 	id: this.bid,
				// 	cid: this.navIndex,
				// 	keyword:this.keyword,
				// })
				const {
					data,
					status,
					msg
				} = res.data
				// console.log(res, "11111")
				if (status == 1) {
					this.totalPage = data.last_page
					type == 'bottom' ? this.list.push(...data.data) : this.list = data.data
					this.pagenum != 1 && data.data.length == 0 ? this.noMoreData = true : this.noMoreData = false
				} else {
					this.showToast(msg)
				}
			},
			// 分类
			async getMerchantClassify() {
				const res = await merchantClassify(`s=/ApiIndex/bcatgroylist&id=${this.bid}`)
				const {
					data,
					status,
					msg
				} = res.data
				// console.log(res, "333333")
				if (status == 1) {
					this.navList = data
					this.navIndex = this.navList[0]?.id
					this.getMerchantGoodsList()
				} else {
					this.showToast(msg)
				}

			},
			checkNav(id) {
				this.navIndex = id
				this.onRefirsh()
			}
		},
		onReachBottom() {
			if (this.pagenum < this.totalPage) {
				this.pagenum += 1
				this.getMerchantGoodsList('bottom')

			} else {
				this.noMoreData = true
			}

		},
		onBackPress(options) {
			let self = this;
			if (options.from === 'navigateBack') {
				return false;
			}
			return true;
		},
	}
</script>

<style lang="scss" scoped>
	.addressImgBox {
		flex-direction: column;
		color: #999;
		padding-top: 20%;

		image {
			width: 400rpx;
			height: 400rpx;
		}
	}

	.search-box {
		margin: 0 30rpx;
		background-color: #F7F7F7;
		border-radius: 13rpx;
		flex: 1;
		padding: 20rpx 28rpx;

		.home-search {
			width: 25rpx;
			height: 25rpx;
		}

		.home-search-input {
			flex: 1;
			font-size: 27rpx;
			margin-left: 16rpx;
		}

		.home-search-btn {
			padding-left: 28rpx;
			color: #41644A;
			font-size: 27rpx;
			border-left: 1rpx solid #F0F0F0;
		}
	}

	.scroll-box {
		width: 710rpx;
		margin: 30rpx;
		white-space: nowrap;
		font-size: 27rpx;
		color: #B3B3B3;

		.nav-item {
			display: inline-block;
			margin-right: 32rpx;
			min-width: 20%;
		}

		.nav-act {
			color: #41644A;
		}

		.nav-item:last-child {
			margin-right: 0;
		}
	}


	.goods-list {
		padding: 20rpx;
		flex-wrap: wrap;

		.goods-item {
			width: 343rpx;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			box-shadow: 0 1rpx 10rpx 0 rgba(0, 0, 0, 0.1);

			.goods-img {
				width: 343rpx;
				height: 400rpx;
				border-radius: 20rpx 20rpx 0 0;
				background-color: #B3B3B3;
			}

			.goods-info {
				padding: 20rpx;
				font-size: 24rpx;
			}

			.goods-price {
				color: #F71212;
				font-size: 27rpx;
				margin-top: 16rpx;

				.price {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}

	}
</style>
